<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false">
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item
          label="账号" 
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-input :disabled="isDisable"
            v-decorator="[
              'username',
              {rules: [{ required: true, message: '请输入用户名称' }]}
            ]"
            placeholder="请输入用户名称" />
        </a-form-item>
        <a-form-item
          label="昵称"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-input
            v-decorator="[
              'nickName',
              {rules: [{ required: true, message: '请输入昵称' }]}
            ]"
            placeholder='请输入昵称' />
        </a-form-item>
        <a-form-item
          label="邮箱"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-input :disabled="isDisable"
            v-decorator="[
              'email',
              {rules: [{ required: true, message: '请输入邮箱' }]}
            ]"
            placeholder='请输入邮箱' />
        </a-form-item>
        <a-form-item  
          label="手机号"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-input :disabled="isDisable"
            v-decorator="[
              'phone',
              {rules: [{ required: true, message: '请输入手机号' }]}
            ]"
            placeholder='请输入手机号' />
        </a-form-item>
        <a-form-item
          :wrapperCol="{ span: 24 }"
          style="text-align: center"
        >
          <a-button htmlType="submit" type="primary">保存</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import pick from 'lodash.pick'
import { getUserById, getUserRole, updateUser } from '@/api/system'
const fields = ['username', 'email', 'nickName', 'phone']
export default {
  name: 'BaseForm',
  data () {
    return {
      form: this.$form.createForm(this),
      model:{
        username:'123',
        email:'234',
        nickName:'345',
        phone:'456'
      },
      role:'',
      isDisable:true
    }
  },
  created () {
    const id = this.$store.getters.userInfo.data.id
    getUserRole(id).then(res=>{
      if (res.data.length) {
        res.data.forEach(i => {
          if(i.id === 5) {
            this.isDisable=false
          }
        })
      }
    })
    fields.forEach(v => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
      // this.model.alarmsData && this.form.setFieldsValue(pick(this.model.alarmsData, fields))
    })
    this.getUserById()
  },
  methods: {
    getUserById(){
      getUserById(this.$store.getters.userInfo.data.id).then(res=>{
        this.model=res.data
        console.log(this.model)
      })
    },
    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          // 校验values中的数据格式
          // 正则匹配邮箱
          if (!/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(values.email)) {
            this.$message.error('邮箱格式不正确')
            return false
          }
          // 正则匹配手机号
          if (!/^1[3456789]\d{9}$/.test(values.phone)) {
            this.$message.error('手机号格式不正确')
            return false
          }
          updateUser(values,this.model.id).then(res=>{
            this.$message.info('保存成功!')
          })
        }
      })
    }
  }
}
</script>
